What is Dialogflow CX?

Dialogflow CX is Google Cloud's enterprise-grade conversational AI platform. It lets you build sophisticated chatbots and voice bots using a visual flow-based interface — without writing extensive code. Think of it as the "Figma of chatbot building."

Why Dialogflow CX?

Real-World Use Cases

• 🏦 Banking — account balance, fund transfers, loan applications
• 🛒 E-commerce — order tracking, returns, product Q&A
• ✈️ Travel — flight booking, itinerary changes, check-in
• 🏥 Healthcare — appointment scheduling, symptom triage
• 📞 Contact Centers — IVR replacement, agent handoff

The Dialogflow CX Console

Everything in this course can be done in the visual console at dialogflow.cloud.google.com. Here's how to get started:

1. Go to console.cloud.google.com and create a project
2. Enable the Dialogflow API in APIs & Services
3. Navigate to Dialogflow CX and create an Agent
4. Choose a region (us-central1 recommended for beginners)
5. Your agent is ready — the visual canvas opens automatically

Core Concepts

Before building anything, you need a mental model of Dialogflow CX's architecture. It's elegantly hierarchical — everything nests inside everything else.

The Architecture Hierarchy

Core Components

How a Conversation Works

Sessions & State

Every conversation is a session. Each session maintains:

• Current Page — where the user is in the conversation
• Session Parameters — stored variables (e.g., $session.params.customer_name)
• Flow history — which flows have been visited

Flows & Pages

Flows — Modular Conversation Sections

A Flow is a reusable module for a topic area. Think of it like a function in programming. Large agents use multiple flows to stay organized.

Example Agent: "Telecom Support Bot"
├── Default Start Flow       ← entry point, routing
├── Billing Flow             ← all billing questions
├── Technical Support Flow   ← network/device issues
├── Account Management Flow  ← profile, password changes
└── Cancellation Flow        ← retention & cancellationsstructure

Flow Entry Point

Every flow has a Start Page which is automatically entered when a flow is called. This is where you configure the flow's entry message and initial routing.

Pages — Conversation States

Pages are where the magic happens. Every page can have:

• Entry Fulfillment — message spoken/shown when entering this page
• Form (Parameters) — information to collect from user
• Transition Routes — where to go next based on user input
• Event Handlers — what to do on no-match, no-input, etc.

A Real Example: Flight Booking

Pages in "Booking Flow":
  
  [Start] 
    Entry: "Welcome! Where would you like to fly?"
    → user provides origin/destination → [Collect Dates]

  [Collect Dates]
    Entry: "What are your travel dates?"
    Form: departure_date, return_date
    → form complete → [Select Seat]

  [Select Seat]  
    Entry: "Window or aisle seat?"
    → user answers → [Confirmation]

  [Confirmation]
    Entry: "Your booking is confirmed! ✈️"
    → ENDpage flow

Page Transitions

Pages transition via Routes. A route fires when:

• A specific Intent is matched (e.g., user confirms booking)
• A Condition is true (e.g., all form fields collected)
• An Event occurs (e.g., no-match 3 times → escalate)

Default Start Flow

Every agent automatically has a Default Start Flow with a Default Welcome Intent. This fires when the user first opens the chat and typically sends a greeting message.

Try the Simulator

Intents & Entities

Intents — What the User Wants

An Intent represents the goal behind a user's message. You teach each intent with Training Phrases — example sentences. Dialogflow's NLU model generalizes from these examples.

Creating a Good Intent

Intent Name: "book.flight"

Training Phrases:
  - "I want to book a flight"
  - "Can I reserve a seat?"
  - "Book me a ticket to New York"
  - "I need to fly to London next week"
  - "Schedule a flight for tomorrow"
  - "Reserve two seats on the 3pm flight"
  - "Looking for flights to Paris"
  - "How do I buy a plane ticket?"
  - "I'd like to travel to Tokyo"
  - "Help me book air travel"
  (add 10-20 varied phrases for best accuracy)intent config

Entities — What to Extract

Entities extract structured data from free-form text. There are three types:

Custom Entity Example

Entity: @pizza-size
  Values:
    - small      (synonyms: tiny, personal)
    - medium     (synonyms: regular, standard)
    - large      (synonyms: big, family, jumbo)
    - extra-large (synonyms: XL, extra large, huge)

Usage in training phrase:
  "I want a [large](@pizza-size) pepperoni pizza"
  → extracts: pizza-size = "large"entity config

Annotating Training Phrases

When you type a training phrase in the console and highlight a word, Dialogflow lets you tag it with an entity. This creates a parameter automatically.

Training phrase: "Book a flight from Chicago to Miami on Friday"

Annotations:
  "Chicago"  → @sys.geo-city    → parameter: origin_city
  "Miami"    → @sys.geo-city    → parameter: destination_city  
  "Friday"   → @sys.date-period → parameter: travel_dateannotation

System Entities Cheat Sheet

Fulfillment & Webhooks

What is Fulfillment?

Fulfillment is what happens when a route fires. It can be one or more of:

• 📝 Static Response — send a text/card/chip response
• 🔄 Parameter Preset — set a session parameter value
• 🌐 Webhook Call — call an external API
• ↩️ Transition — move to another page/flow

Response Types

// TEXT RESPONSE
"Your order has been placed! 🎉"

// RICH RESPONSE (chips)
Text: "How can I help you?"
Suggestion chips: ["Check order", "Cancel order", "Talk to agent"]

// CUSTOM PAYLOAD (for frontend)
{
  "richContent": [[{
    "type": "chips",
    "options": [
      {"text": "Order Pizza"},
      {"text": "Track Order"}
    ]
  }]]
}response types

Webhooks — The Power Feature

Webhooks allow Dialogflow CX to call your backend service in real time. This enables dynamic responses, database lookups, and API integrations.

Webhook Request Format

// DIALOGFLOW SENDS THIS TO YOUR ENDPOINT:
POST https://your-server.com/webhook

{
  "detectIntentResponseId": "abc-123",
  "intentInfo": {
    "lastMatchedIntent": "projects/.../intents/order-pizza",
    "parameters": {
      "pizza-size": { "stringValue": "large" },
      "pizza-topping": { "stringValue": "pepperoni" }
    }
  },
  "sessionInfo": {
    "session": "projects/.../sessions/session-123",
    "parameters": {
      "customer_name": "Amir",
      "loyalty_points": 250
    }
  },
  "text": "I want a large pepperoni pizza"
}webhook request

Webhook Response Format

// YOUR SERVER RETURNS THIS:
{
  "fulfillment_response": {
    "messages": [{
      "text": {
        "text": ["Order confirmed! Your large pepperoni pizza will arrive in 30 mins."]
      }
    }]
  },
  "session_info": {
    "parameters": {
      "order_id": "ORD-98765",
      "estimated_time": "30 minutes"
    }
  }
}webhook response

Simple Python Webhook (Cloud Functions)

import functions_framework
import json

@functions_framework.http
def dialogflow_webhook(request):
    req = request.get_json()
    
    # Get parameters from session
    params = req.get('sessionInfo', {}).get('parameters', {})
    pizza_size = params.get('pizza-size', 'medium')
    topping = params.get('pizza-topping', 'cheese')
    
    # Business logic
    prices = {'small': 8, 'medium': 12, 'large': 16}
    price = prices.get(pizza_size, 12)
    order_id = "ORD-" + str(hash(pizza_size+topping))[-5:]
    
    return {
        "fulfillment_response": {
            "messages": [{
                "text": {
                    "text": [f"✅ Order #{order_id}: {pizza_size} {topping} pizza - ${price}. Ready in 25 mins!"]
                }
            }]
        },
        "session_info": {
            "parameters": {
                "order_id": order_id,
                "order_price": price
            }
        }
    }python webhook

State Handlers

What are State Handlers?

State handlers are rules attached to a Page or Flow that determine what happens next. There are 4 types:

Condition Route Examples

// Route fires if order total is over $50 (add free delivery)
Condition: $session.params.order_total > 50
Action: Set delivery_fee = 0, say "Free delivery on your order!"

// Route fires if user is a premium member
Condition: $session.params.membership_tier = "premium"
Action: Transition to PremiumServicesPage

// Route fires if all form parameters collected
Condition: $page.params.status = "FINAL"  
Action: Transition to ConfirmationPage

// Combining conditions
Condition: $session.params.age >= 18 AND $session.params.country = "US"
Action: Show age-restricted content pageconditions

Event Handlers — Error Recovery

Event handlers are crucial for graceful failure handling:

Event: sys.no-match-1      → "Sorry, I didn't understand. Can you rephrase?"
Event: sys.no-match-2      → "I'm still having trouble. Here are some options..."
Event: sys.no-match-default → Transfer to live agent
Event: sys.no-input-1      → "Are you still there?"
Event: sys.no-input-default → "I'll end the session now. Goodbye!"event handlers

Scope: Page vs. Flow Handlers

Parameters & Forms

Session Parameters

Parameters are variables stored in the session. They persist across the entire conversation and can be read/written anywhere.

// REFERENCE SYNTAX
$session.params.customer_name    // from session
$intent.params.pizza_size        // from current intent
$page.params.status              // form status
$flow.params.flow_variable       // from current flow

// IN RESPONSE TEXT (interpolation)
"Hello $session.params.customer_name! Your order is confirmed."
→ renders as: "Hello Amir! Your order is confirmed."parameter syntax

Forms — Collecting Multiple Parameters

A Form is a set of parameters a page needs to collect before proceeding. Dialogflow CX automatically prompts the user for any missing parameters.

Page: "Collect Flight Details"
Form Parameters:
  - origin_city     (required) → @sys.geo-city
    Prompt: "Where are you flying from?"
    
  - destination_city (required) → @sys.geo-city
    Prompt: "And where are you flying to?"
    
  - travel_date     (required) → @sys.date
    Prompt: "What's your travel date?"
    
  - num_passengers  (optional) → @sys.number
    Prompt: "How many passengers?"

// When ALL required params are filled:
$page.params.status = "FINAL"
→ Condition route fires → transition to next pageform config

Form Reprompt — Handling Invalid Input

Parameter: travel_date
  Initial prompt: "What date would you like to travel?"
  
  Reprompt event handlers:
    sys.no-match-1: "I didn't catch that. Please say a date like 'March 15' or 'next Friday'."
    sys.no-match-2: "Let me try again — what date works for you? Example: 'April 1st'"
    sys.no-match-default: "I'm having trouble with the date. Let me connect you with an agent."reprompt

Parameter Presets

You can set parameters programmatically in fulfillment without collecting from user:

// In a route's fulfillment → Parameter Presets:
loyalty_tier = "gold"
session_start_time = "2024-01-15T10:30:00"
agent_name = "Max"

// Conditional preset based on other params:
discount_pct = IF($session.params.loyalty_tier == "gold", 15, 0)parameter presets

Route Groups & Versions

Route Groups — Reusable Logic

Route Groups let you define a set of routes once and reuse them across multiple pages. Perfect for global commands like "help", "cancel", "repeat", or "talk to agent".

Route Group: "Global Commands"
  Routes:
    - Intent: talk.to.agent    → Transition to [Live Agent Page]
    - Intent: repeat.last      → Fulfillment: repeat last response
    - Intent: main.menu        → Transition to [Main Menu Page]
    - Intent: goodbye          → Fulfillment: "Goodbye!" → END

// Apply to multiple pages in one click
// Instead of adding these routes to every page manuallyroute group

Environments & Versions

Versions let you snapshot your agent at a point in time. Environments let you run different versions simultaneously.

Typical workflow:
  1. Edit in Draft
  2. Create Version: "v2.3.0" with description
  3. Deploy to Staging environment → test
  4. Deploy to Production environment → go live
  5. If issues → rollback to previous version in secondsdeployment workflow

CI/CD Integration

# Deploy version via gcloud CLI
gcloud dialogflow cx versions create \
  --agent=AGENT_ID \
  --flow=START_FLOW_ID \
  --display-name="v2.3.0" \
  --description="Added pizza customization flow"

# Deploy to environment  
gcloud dialogflow cx environments deploy \
  --environment=ENVIRONMENT_ID \
  --flow-version=FLOW_VERSION_IDgcloud cli

Project: Build a Pizza Ordering Bot 🍕

Let's build a complete pizza ordering bot from scratch, applying everything we've learned.

Architecture Overview

PIZZA BOT ARCHITECTURE
========================
Agent: "PizzaBot"
│
├── Default Start Flow
│   └── Start Page
│       ├── WELCOME → Greeting Page
│       └── Intent: start.ordering → Order Flow
│
└── Order Flow
    ├── Start Page (entry)
    ├── Choose Pizza Page     (form: size, crust, toppings)
    ├── Customize Page        (extras, sauce)
    ├── Confirm Order Page    (show summary, confirm/edit)
    ├── Payment Page          (collect payment method)
    └── Order Confirmed Page  (webhook: submit order)

Route Groups:
    - Global: cancel, help, restartarchitecture

Step 1: Create the Entities

@pizza-size:    small, medium, large, xl
@pizza-crust:   thin, thick, stuffed, gluten-free
@pizza-topping: pepperoni, mushroom, onion, pepper, 
                olive, bacon, chicken, extra-cheese
@payment-type:  card, cash, apple-pay, google-payentities

Step 2: Create the Intents

order.pizza         — "I want to order a pizza", "Let's get a pizza"
confirm.order       — "Yes", "Confirm", "That's right", "Place the order"
edit.order          — "Change my order", "Actually...", "Wait, I want..."
cancel.order        — "Cancel", "Never mind", "Stop"
ask.for.help        — "Help", "What can you do?", "Options"
provide.pizza.size  — "Large please", "Make it medium"
provide.toppings    — "Add pepperoni and mushrooms"intents

Step 3: Build the "Choose Pizza" Page

Page: "Choose Pizza"
Entry Fulfillment: "Great! Let's build your perfect pizza. 🍕"

Form Parameters:
  pizza_size   → @pizza-size
    Prompt: "What size? Small ($8), Medium ($12), Large ($16), or XL ($20)?"
    
  pizza_crust  → @pizza-crust  
    Prompt: "What crust? Thin, thick, stuffed, or gluten-free?"
    
  pizza_toppings → @pizza-topping (list)
    Prompt: "Choose your toppings: pepperoni, mushroom, onion, pepper, olive, bacon, chicken, or extra cheese?"

Condition Route (form complete):
  $page.params.status = "FINAL" → Transition to [Confirm Order Page]page config

Step 4: Confirmation Page

Page: "Confirm Order"
Entry Fulfillment:
  "Here's your order summary:
   🍕 $session.params.pizza_size $session.params.pizza_crust pizza
   Toppings: $session.params.pizza_toppings
   Total: $session.params.calculated_price
   
   Ready to place your order?"
   
   Chips: ["✅ Yes, place order", "✏️ Edit order", "❌ Cancel"]

Routes:
  Intent: confirm.order → Webhook (submit) → [Order Confirmed Page]
  Intent: edit.order    → Transition to [Choose Pizza Page]
  Intent: cancel.order  → Fulfillment: "Order cancelled." → ENDconfirmation page

Live Demo

Project: Banking Support Bot 🏦

A more complex agent with authentication, multiple flows, and conditional routing — a production-like scenario.

Architecture

BANKING BOT ARCHITECTURE
=========================
Agent: "BankBot"
│
├── Default Start Flow
│   ├── Authenticate User Page  ← verify account number
│   └── Main Menu Page          ← routing hub
│
├── Account Flow
│   ├── Check Balance Page      ← webhook: get balance
│   ├── Recent Transactions Page ← webhook: get transactions
│   └── Account Details Page
│
├── Transfer Flow
│   ├── Enter Amount Page       ← form: amount, account
│   ├── Confirm Transfer Page
│   └── Transfer Complete Page  ← webhook: execute transfer
│
├── Support Flow
│   ├── Report Card Lost Page
│   ├── Dispute Transaction Page
│   └── Live Agent Transfer Page
│
└── Global Route Group
    └── "main menu", "help", "logout"architecture

Authentication Pattern

Page: "Authenticate User"
Entry: "Welcome to SecureBank. Please enter your account number."

Form:
  account_number → @sys.number (6 digits)

On form complete → Webhook: verify_account
  IF webhook returns verified=true:
    Set session.params.authenticated = true
    Set session.params.customer_name = [from webhook]
    Transition to [Main Menu]
  IF webhook returns verified=false:
    Increment session.params.auth_attempts
    IF auth_attempts >= 3 → Transition to [Locked Account Page]
    ELSE → Reprompt: "Account not found. Please try again."auth page

Conditional Routing Based on Authentication

// On Start Page — check auth before anything
Route 1 (highest priority):
  Condition: $session.params.authenticated != true
  Action: Transition to [Authenticate User Page]

Route 2:  
  Intent: check.balance
  Condition: $session.params.authenticated = true
  Action: Transition to Account Flow → Check Balance Page

// This pattern prevents unauthenticated access to any sensitive pageauth guard

Transfer Flow — Advanced Form

Page: "Enter Transfer Details"
Form:
  transfer_amount   → @sys.number
    Prompt: "How much would you like to transfer?"
    Validation webhook: check sufficient funds
    
  recipient_account → @sys.number
    Prompt: "Enter the recipient's account number."
    
  transfer_note     → @sys.any (optional)
    Prompt: "Any note for this transfer? (optional, say 'skip' to continue)"

On form complete:
  Condition: $session.params.transfer_amount > $session.params.account_balance
  → Fulfillment: "Insufficient funds. Your balance is $X."
  → Transition back to [Enter Transfer Details]
  
  Condition: $session.params.transfer_amount <= $session.params.account_balance
  → Transition to [Confirm Transfer Page]transfer form

Testing & Debugging

The Test Console

Dialogflow CX has a built-in test simulator accessible from the right panel. It shows:

• Current page and flow
• Matched intent and confidence score
• Extracted parameters and their values
• Which route was triggered
• Webhook request/response details

Conversation Replay

A powerful CX feature — record test conversations and replay them to detect regressions after changes.

// Test conversation format (YAML)
test_cases:
  - display_name: "Complete Pizza Order"
    conversation_turns:
      - user_input: "I want to order a pizza"
        virtual_agent_output:
          triggered_intent: "order.pizza"
          current_page: "Choose Pizza"
          
      - user_input: "Large pepperoni"
        virtual_agent_output:
          current_page: "Choose Pizza"
          session_parameters:
            pizza_size: "large"
            pizza_toppings: ["pepperoni"]test case yaml

Common Issues & Fixes

Validation Tool

// Run validation before deploying:
gcloud dialogflow cx agents validate --agent=AGENT_ID

// Returns warnings like:
// WARNING: Intent 'order.pizza' has only 3 training phrases (minimum: 10)
// WARNING: Page 'Confirm Order' has no no-match handler
// ERROR: Webhook 'process-order' URL returns 404validation

Final Exam 🎓

Complete the following exam to earn your Dialogflow CX completion certificate. You need 14/20 correct (70%) to pass.